<template>
    <div class="flexbox flexcolumn height_100 com_box flexjust flexcenter">
        <ViewData ref="view_ref"/>
        <ComModel :viewForm="viewForm" @setSessionStorage="setSessionStorage"/>
        <div class="str_btn flexbox flexcolumn flexcenter">
            <el-form label-position='top' label-width="90px" :model="submitDataForm" :hide-required-asterisk='true' ref="submitDataForm">
                <el-form-item label="" prop="name" :rules="[{required: true,message: '请输入',trigger: ['blur', 'change']}]" style="margin-bottom:0">
                    <el-input maxlength="20" v-model="submitDataForm.name" placeholder="设置策略名称，最多20个字符" style="width:340px;" class="str_input"></el-input>
                </el-form-item>
            </el-form>
            <el-button plain class="plain_blue str_button" @click="viewStrategy">预览</el-button>
            <el-button type="primary" class="str_button" @click="submitForm('submitDataForm')" :disabled="loading" :loading="loading">保存设置</el-button>
        </div>
    </div>
</template>

<script>
import ViewData from './ViewData'
import ComModel from './ComModel'
export default {
    components: {
       ViewData,
       ComModel
    },
    name: "",
    data() {
        return {
            loading:false,
            viewForm: {
                is_adver: false,
                adverData: [],
                is_rules: false,
                rulesDta: [],
                type:null
            },
            submitDataForm: {
                advertiser_list: [],
                use_rule: [],
                type:null,
                name: "",
            },
        };
    },
    created() {
        let aobj = JSON.parse(
            window.sessionStorage.getItem("addggffdata")
        );
        if (aobj) {
            this.viewForm = aobj;
        }
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("addggffdata");
    },
    methods: {

        // 预览规则
        viewStrategy() {
            this.$refs.view_ref.dialogVisible = true;
            this.$refs.view_ref.viewForm.adverData = this.viewForm.adverData;
            this.$refs.view_ref.viewForm.rulesDta = this.viewForm.rulesDta;
            this.$refs.view_ref.viewForm.type = this.viewForm.type;
        },

        // 提交保存
        submitForm(formName) {
            let flag =
                this.viewForm.is_adver &&
                this.viewForm.is_rules &&
                this.viewForm.type
            if (!flag) {
                this.$message.error("请完善信息！");
                return;
            }
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let advertiser_list = []
                    for(let i in this.viewForm.adverData){
                        advertiser_list.push({
                            advertiser_id:this.viewForm.adverData[i].advertiser_id,
                        })
                    }
                    this.submitDataForm.advertiser_list = advertiser_list
                    this.submitDataForm.use_rule = this.viewForm.rulesDta
                    this.submitDataForm.type = this.viewForm.type
                    // console.log(this.submitDataForm);
                    // return 
                    this.loading = true
                    const { data: res } = await this.$http.post(
                        "autodrop/TiktokAdvertiser/templateAdd",
                        this.submitDataForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$router.push({
                            path: '/tk_ggff',
                        });
                        this.$message({
                            message: "添加成功",
                            type: "success",
                        });
                        this.loading = false;
                    }
                } else {
                    return false;
                }
            });
        },

        setSessionStorage() {
            window.sessionStorage.setItem(
                "addggffdata",
                JSON.stringify(this.viewForm)
            );
        },
    },
};
</script>


<style scoped>
.str_input {
    margin-top: 16px;
    text-align: center;
}
.str_button {
    width: 340px;
    margin-left: 0;
    margin-top: 16px;
}
</style>

<style>
.str_input .el-input__inner {
    text-align: center;
}
.step_btn.el-button--primary.is-plain:focus, .step_btn.el-button--primary.is-plain:hover{
    color: #4475ff;
    background: rgba(165, 177, 209, 0.2);
}
</style>


